<template>
  <div class="body">
    <div class="music">
      <el-container>
        <!-- 音乐播放器头部 -->
        <el-header>
          <div class="title">飞飞音乐播放器</div>
          <div class="input">
            <input
              type="text"
              @keyup.enter="searchMusic"
              class="search"
              v-model="query"
              placeholder="请输入内容..."
            />
            <div class="search-btn" @click="searchMusic">
              <i class="el-icon-search"></i>
            </div>
          </div>
        </el-header>
        <el-container>
          <!-- 音乐列表 -->
          <el-aside width="230px">
            <el-table
              v-loading="loading"
              :data="musicList"
              stripe
              @row-dblclick="playMusic"
              style="width: 100%; cursor: default; user-select: none"
            >
              <el-table-column prop="name" width="220"></el-table-column>
              <!-- <el-table-column
                prop="artists[0].name"
                width="70"
              ></el-table-column> -->
            </el-table>
          </el-aside>
          <!-- 专辑 -->
          <el-main>
            <div v-if="imgUrl !== ''">
              <h1 style="text-align: center; cursor: default">
                {{ musicName }}
                <span class="mvBtn" @click="playMv" v-if="mvUrl !== null"
                  >MV<i class="el-icon-caret-right"></i
                ></span>
              </h1>
              <div class="songInformation">
                歌手: {{ singer }}&nbsp;&nbsp;&nbsp;&nbsp;专辑: {{ album }}
              </div>
              <img class="imgUrl" :src="imgUrl" />
            </div>
          </el-main>
          <!-- 热门评论 -->
          <el-aside width="260px">
            <h1 style="margin-left: 10px">
              热门评论
              <span v-if="hotComments != ''">({{ hotComments.length }})</span>
            </h1>
            <div
              v-for="item in hotComments"
              :key="item.commentId"
              class="comments"
            >
              <div style="display: flex">
                <!-- 用户头像 -->
                <img :src="item.user.avatarUrl" class="userImg" alt="" />
                <!-- 用户名称 -->
                <div class="userName">{{ item.user.nickname }}</div>
                <!-- 发布时间 -->
                <div class="timeStr">{{ item.timeStr }}</div>
              </div>
              <!-- 评论 -->
              <div class="userText">
                &nbsp;&nbsp;&nbsp;&nbsp;{{ item.content }}
              </div>
            </div>
            <p
              v-if="hotComments == ''"
              style="color: #ccc; text-align: center; margin-top: 10px"
            >
              暂无数据
            </p>
          </el-aside>
        </el-container>
      </el-container>
      <!-- 播放歌曲 -->
      <audio
        ref="music"
        :src="musicUrl"
        controls
        loop
        autoplay
        v-if="musicUrl !== ''"
      ></audio>
    </div>
    <!-- 播放mv -->
    <div class="mvDiv" v-if="musicMvUrl !== ''">
      <video class="playMv" :src="musicMvUrl" controls autoplay></video>
      <i class="el-icon-close" @click="mvOff"></i>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Music",
  data() {
    return {
      query: "",
      musicList: [],
      loading: "",
      musicUrl: "",
      imgUrl: "",
      musicName: "",
      hotComments: [],
      singer: "",
      album: "",
      mvUrl: "",
      // mv地址
      musicMvUrl: "",
    };
  },
  methods: {
    // 歌曲搜索
    searchMusic() {
      this.loading = true;
      axios
        .get("https://autumnfish.cn/search?keywords=" + this.query)
        .then((res) => {
          // console.log("搜索歌曲", res);
          // console.log(res.data.result.songs);
          this.musicList = res.data.result.songs;
          this.loading = false;
          if (this.musicList == undefined) {
            this.$message.error("接口网络有点问题哦，试试搜索其他的吧！");
          }
        });
    },
    // 音乐播放
    playMusic(row) {
      // console.log('row',row);

      // 获取歌曲地址
      axios.get("https://autumnfish.cn/song/url?id=" + row.id).then((res) => {
        // console.log('获取歌曲地址',res);
        // console.log(res.data.data[0].url);
        this.musicUrl = res.data.data[0].url;
      });
      // 获取歌曲详情(歌曲详情，包括封面信息)
      axios
        .get("https://autumnfish.cn/song/detail?ids=" + row.id)
        .then((res) => {
          // console.log("歌曲详情", res);
          // 专辑封面
          // console.log(res.data.songs[0].al.picUrl);
          this.imgUrl = res.data.songs[0].al.picUrl;
          // 歌曲名
          // console.log(res.data.songs[0].name);
          this.musicName = res.data.songs[0].name;
          // 歌手名
          // console.log(res.data.songs[0].ar[0].name);
          this.singer = res.data.songs[0].ar[0].name;
          // 歌曲专辑
          // console.log(res.data.songs[0].al.name);
          this.album = res.data.songs[0].al.name;
        });
      // 获取热门评论
      axios
        .get("https://autumnfish.cn/comment/hot?type=0&id=" + row.id)
        .then((res) => {
          // console.log("热门评论", res);
          // 获取评论
          // console.log("获取评论", res.data.hotComments);
          this.hotComments = res.data.hotComments;
        });
      // 获取视频地址
      axios.get("https://autumnfish.cn/mv/url?id=" + row.mvid).then((res) => {
        // console.log(row.mvid);
        // console.log("视频地址", res);
        // console.log(res.data.data.url);
        this.mvUrl = res.data.data.url;
      });
    },
    // 播放视频
    playMv() {
      this.musicMvUrl = this.mvUrl;
      // this.musicUrl = "";
      this.$refs.music.pause();
    },
    // 关闭视频
    mvOff() {
      this.musicMvUrl = "";
      this.$refs.music.play();
    },
  },
};
</script>

<style>
/* body {
  filter: grayscale(1);
} */
.title {
  font-size: 22px;
  color: #fff;
  font-weight: 700;
  font-family: 方正舒体;
}
.music {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 1050px;
  height: 580px;
  border: 1px solid skyblue;
}
.el-header {
  display: flex;
  background-color: skyblue;
  line-height: 60px;
}
.el-aside {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  overflow: auto;
  height: 520px;
}
.search {
  height: 30px;
  background-color: rgb(119, 198, 230);
  border: none;
  border-radius: 30px 0 0 30px;
  outline: none;
  padding-left: 20px;
}
.search-btn {
  height: 32px;
  width: 30px;
  background-color: rgb(119, 198, 230);
  border-radius: 0 30px 30px 0;
}
.search-btn i {
  position: absolute;
  top: 23px;
}
.input {
  display: flex;
  margin-left: 320px;
  margin-top: 15px;
}
.el-table__header-wrapper {
  height: 0;
}
.el-table {
  overflow: auto;
  height: 520px;
}
.el-aside::-webkit-scrollbar {
  display: none;
}
.el-table::-webkit-scrollbar {
  display: none;
}
audio {
  width: 1050px;
  margin-top: 2px;
}
.imgUrl {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  margin: 30px 0 0 100px;
  animation: fadenum 20s infinite linear;
}
@keyframes fadenum {
  100% {
    transform: rotate(360deg);
  }
}
.userImg {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin: 8px;
}
.userName {
  width: 110px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
  color: rgb(219, 95, 233);
  line-height: 48px;
}
.userText {
  margin: 0 10px;
  font-size: 14px;
  color: rgb(144, 141, 141);
}
.timeStr {
  font-size: 12px;
  color: #ccc;
  line-height: 48px;
  margin-left: 10px;
}
.songInformation {
  text-align: center;
  font-size: 14px;
  color: #bbb;
}
.mvBtn {
  margin-left: 10px;
  color: skyblue;
  font-size: 12px;
  border: 1px solid skyblue;
}
.playMv {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(238, 235, 235);
  width: 1200px;
  height: 600px;
}
.el-icon-close {
  position: absolute;
  right: 175px;
  top: 65px;
  font-weight: 700;
  font-size: 26px;
}
.el-icon-close:hover {
  color: red;
}
</style>